<template>
    <div class="pack">
        <div class="tree_container">
            <h3>电话列表</h3>
            <div class="treePack">
                <ul class="phoneList">
                    <li v-for="(list,index)  in phoneList"
                        style="cursor: pointer; line-height: 30px;padding-left: 10px;"
                        :class="{'phoneListBg':ind === index}" @click="searchInfo(list.phoneNum,index)">
                        <Icon type="ios-telephone" style="font-size: 18px;margin-right: 10px;"></Icon>
                        {{list.phoneNum}}
                    </li>
                </ul>
            </div>
            <div style="position: absolute;left: 295px;top: 25px;z-index: 410;background: #fff;padding: 5px; box-shadow: 0 0px 5px 0 #000;">
                <!-- 搜索面板 -->
                <div class="search" style="margin-bottom: 5px">
                    搜索内容：<input type="text" id="keyWord" value=""/>
                    <Button type="primary" size="small" @click="searcch">搜索</Button>
                </div>
                <!-- 提示词面板 -->
                <div id="promptDiv" class="prompt"></div>
                <!-- 统计面板 -->
                <div id="statisticsDiv" class="statistics"></div>
                <!-- 建议词面板 -->
                <div id="suggestsDiv" class="suggests"></div>
                <!-- 公交提示面板 -->
                <div id="lineDataDiv" class="lineData"></div>
                <!-- 搜索结果面板 -->
                <div id="resultDiv" class="result">
                    <div id="searchDiv"></div>
                    <div id="pageDiv" style="margin-left: 35px;">
                        <!--<Button type="primary" size="small" @click="searcch">第一页</Button>-->
                        <!--<Button type="primary" size="small" @click="searcch">上一页</Button>-->
                        <!--<Button type="primary" size="small" @click="searcch">下一页</Button>-->
                        <!--<Button type="primary" size="small" @click="searcch">最后一页</Button>-->
                        <!--<input type="button" value="第一页" onClick="localsearch.firstPage()"/>-->
                        <!--<input type="button" value="上一页" onClick="localsearch.previousPage()"/>-->
                        <!--<input type="button" value="下一页" onClick="localsearch.nextPage()"/>-->
                        <!--<input type="button" value="最后一页" onClick="localsearch.lastPage()"/>-->
                        <Button type="primary" size="small" @click="previousPage">上一页</Button>
                        <Button type="primary" size="small" @click="nextPage">下一页</Button>
                        <input type="text" value="" id="pageId" size="3" style="line-height: 20px;"/>
                        <Button type="primary" size="small" @click="gotoPage">转到</Button>
                        <!--<input type="button" onClick="localsearch.gotoPage(parseInt(document.getElementById('pageId').value));" value="转到"/>-->
                    </div>
                </div>
            </div>
        </div>

        <div id="mapDiv" class="detail_container"
             style="position: absolute;left: 285px;right: 10px;height: 96.7%"></div>
    </div>
</template>

<script type="text/javascript">
    var map;
    var ezjsUtil = Vue.ezjsUtil;
    var apiConstants = ezjsUtil.constants.api;
    var localsearch;
    export default {
        components: {},
        data() {
            return {
                //计时器
                mapTimer: '',
                mapinfo: "",
                phoneList: "",
                ind: '',
            }
        },
        computed: {},
        created() {
            this.searchRecord();
            this.searchAll();
            this.check();
        },
        methods: {
            //地图搜索
            searcch() {
                localsearch.search(document.getElementById('keyWord').value);
            },
            //上一页
            previousPage() {
                localsearch.previousPage()
            },
            //下一页
            nextPage() {
                localsearch.nextPage()
            },
            //跳转
            gotoPage() {
                localsearch.gotoPage(parseInt(document.getElementById('pageId').value));
            },

            //地图加载
            onLoad() {
                //初始化地图对象
                map = new T.Map("mapDiv");
                //设置显示地图的中心点和级别
                map.centerAndZoom(new T.LngLat(125.20709, 46.45267), 14);

                var config = {
                    pageCapacity: 10,	//每页显示的数量
                    onSearchComplete: this.localSearchResult	//接收数据的回调函数
                };
                //创建搜索对象
                localsearch = new T.LocalSearch(map, config);
            },

            //报警点信息展示
            showAlarm() {
                //删除地图上所有覆盖物
                map.clearOverLays();
                var picArray = this.mapinfo.coordinate.split(',');
                var lnglat = new T.LngLat(picArray[0], picArray[1]);
                map.panTo(lnglat, 16);

                //引入图标
                var icon = new T.Icon({
                    iconUrl: "images/map/icon_1.gif",
                    iconSize: new T.Point(30, 60),
                    iconAnchor: new T.Point(10, 25)
                });
                var marker = new T.Marker(lnglat, {icon: icon});
                map.addOverLay(marker);
                var infoWin1 = new T.InfoWindow();
                var sContent =
                    "<div style='margin:0px;width: 200px'>" +
                    "<table>" +
                    "<tr valign='top'><td width='65px'>电话号码：</td><td>" + this.mapinfo.phoneNum + "</td></tr>" +
                    "<tr valign='top'><td width='65px'>负责人：</td><td>" + this.mapinfo.principal + "</td></tr>" +
                    "<tr valign='top'><td width='65px'>地点名称：</td><td>" + this.mapinfo.locationName + "</td></tr>" +
                    "<tr valign='top'><td width='65px'>所属装置：</td><td>" + this.mapinfo.affiliatedDevice + "</td></tr>" +
                    "</table>" +
                    "</div>";
                infoWin1.setContent(sContent);
                infoWin1.setOffset([6, 7]);
                marker.openInfoWindow(infoWin1);
                infoWin1.addEventListener("close",function(){
                  map.removeOverLay(marker);
              })
            },

            //通过电话号码查询报警点信息
            searchInfo(val, index) {
                this.clearAll();
                this.ind = index
                var _this = this;
                ezjsUtil.request(apiConstants.mapDisplay_search,
                    {
                        phoneNum: val,
                    },
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        _this.mapinfo = data;
                        _this.showAlarm();
                    }
                )
            },
            //查找最新报警记录
            searchRecord() {
                var _this = this;
                ezjsUtil.request(apiConstants.alarmRecord_detail, {},
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        if (data != null) {
                            _this.searchInfo(data.phoneNum);
                        }
                    }
                )
            },
            //查询所有电话列表
            searchAll() {
                var _this = this;
                ezjsUtil.request(apiConstants.mapDisplay_searchAll, {},
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        _this.phoneList = data;
                    }
                )
            },
            //查询配置文件内容
            searchPro() {
                var _this = this;
                ezjsUtil.request(apiConstants.alarmRecord_searchPro, {},
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        if (data != null) {
                            _this.searchInfo(data);
                        }
                    }
                )
            },

            localSearchResult(result) {
                //清空地图及搜索列表
                this.clearAll();

                //添加提示词
//                prompt(result);

                //根据返回类型解析搜索结果
                switch (parseInt(result.getResultType())) {
                    case 1:
                        //解析点数据结果
                        this.pois(result.getPois());
                        break;
                    case 2:
                        //解析推荐城市
                        this.statistics(result.getStatistics());
                        break;
                    case 3:
                        //解析行政区划边界
                        this.area(result.getArea());
                        break;
                    case 4:
                        //解析建议词信息
                        this.suggests(result.getSuggests());
                        break;
                    case 5:
                        //解析公交信息
                        this.lineData(result.getLineData());
                        break;
                }
            },

            //解析提示词
            prompt(obj) {
                var prompts = obj.getPrompt();
                if (prompts) {
                    var promptHtml = "";
                    for (var i = 0; i < prompts.length; i++) {
                        var prompt = prompts[i];
                        var promptType = prompt.type;
                        var promptAdmins = prompt.admins;
                        var meanprompt = prompt.DidYouMean;
                        if (promptType == 1) {
                            promptHtml += "<p>您是否要在" + promptAdmins[0].name + "</strong>搜索更多包含<strong>" + obj.getKeyword() + "</strong>的相关内容？<p>";
                        }
                        else if (promptType == 2) {
                            promptHtml += "<p>在<strong>" + promptAdmins[0].name + "</strong>没有搜索到与<strong>" + obj.getKeyword() + "</strong>相关的结果。<p>";
                            if (meanprompt) {
                                promptHtml += "<p>您是否要找：<font weight='bold' color='#035fbe'><strong>" + meanprompt + "</strong></font><p>";
                            }
                        }
                        else if (promptType == 3) {
                            promptHtml += "<p style='margin-bottom:3px;'>有以下相关结果，您是否要找：</p>"
                            for (i = 0; i < promptAdmins.length; i++) {
                                promptHtml += "<p>" + promptAdmins[i].name + "</p>";
                            }
                        }
                    }
                    if (promptHtml != "") {
                        document.getElementById("promptDiv").style.display = "block";
                        document.getElementById("promptDiv").innerHTML = promptHtml;
                    }
                }
            },

            //解析点数据结果
            pois(obj) {
                if (obj) {
                    //显示搜索列表
                    var divMarker = document.createElement("div");
                    //坐标数组，设置最佳比例尺时会用到
                    var zoomArr = [];
                    for (var i = 0; i < obj.length; i++) {
                        //闭包
                        (function (i) {
                            //名称
                            var name = obj[i].name;
                            //地址
                            var address = obj[i].address;
                            //坐标
                            var lnglatArr = obj[i].lonlat.split(" ");
                            var lnglat = new T.LngLat(lnglatArr[0], lnglatArr[1]);

                            var winHtml = "名称:" + name + "<br/>地址:" + address;

                            //创建标注对象
                            var marker = new T.Marker(lnglat);
                            //地图上添加标注点
                            map.addOverLay(marker);
                            //注册标注点的点击事件
                            var markerInfoWin = new T.InfoWindow(winHtml, {autoPan: true});
                            marker.addEventListener("click", function () {
                                marker.openInfoWindow(markerInfoWin);
                            });

                            zoomArr.push(lnglat);

                            //在页面上显示搜索的列表
                            var a = document.createElement("a");
                            a.href = "javascript://";
                            a.innerHTML = name;
                            a.onclick = function () {
                                var markerInfoWin = new T.InfoWindow(winHtml, {autoPan: true});
                                marker.openInfoWindow(markerInfoWin);
//                                this.showPosition(marker, winHtml);
                            }
                            divMarker.appendChild(document.createTextNode((i + 1) + "."));
                            divMarker.appendChild(a);
                            divMarker.appendChild(document.createElement("br"));
                        })(i);
                    }
                    //显示地图的最佳级别
                    map.setViewport(zoomArr);
                    //显示搜索结果
                    divMarker.appendChild(document.createTextNode('共' + localsearch.getCountNumber() + '条记录，分' + localsearch.getCountPage() + '页,当前第' + localsearch.getPageIndex() + '页'));
                    document.getElementById("searchDiv").appendChild(divMarker);
                    document.getElementById("resultDiv").style.display = "block";
                }
            },

            //显示信息框
            showPosition(marker, winHtml) {
                var markerInfoWin = new T.InfoWindow(winHtml, {autoPan: true});
                marker.openInfoWindow(markerInfoWin);
            },

            //解析推荐城市
            statistics(obj) {
                if (obj) {
                    //坐标数组，设置最佳比例尺时会用到
                    var pointsArr = [];
                    var priorityCitysHtml = "";
                    var allAdminsHtml = "";
                    var priorityCitys = obj.priorityCitys;
                    if (priorityCitys) {
                        //推荐城市显示
                        priorityCitysHtml += "在中国以下城市有结果<ul>";
                        for (var i = 0; i < priorityCitys.length; i++) {
                            priorityCitysHtml += "<li>" + priorityCitys[i].name + "(" + priorityCitys[i].count + ")</li>";
                        }
                        priorityCitysHtml += "</ul>";
                    }

                    var allAdmins = obj.allAdmins;
                    if (allAdmins) {
                        allAdminsHtml += "更多城市<ul>";
                        for (var i = 0; i < allAdmins.length; i++) {
                            allAdminsHtml += "<li>" + allAdmins[i].name + "(" + allAdmins[i].count + ")";
                            var childAdmins = allAdmins[i].childAdmins;
                            if (childAdmins) {
                                for (var m = 0; m < childAdmins.length; m++) {
                                    allAdminsHtml += "<blockquote>" + childAdmins[m].name + "(" + childAdmins[m].count + ")</blockquote>";
                                }
                            }
                            allAdminsHtml += "</li>"
                        }
                        allAdminsHtml += "</ul>";
                    }
                    document.getElementById("statisticsDiv").style.display = "block";
                    document.getElementById("statisticsDiv").innerHTML = priorityCitysHtml + allAdminsHtml;
                }
            },

            //解析行政区划边界
            area(obj) {
                if (obj) {
                    //坐标数组，设置最佳比例尺时会用到
                    var pointsArr = [];
                    var points = obj.points;
                    for (var i = 0; i < points.length; i++) {
                        var regionLngLats = [];
                        var regionArr = points[i].region.split(",");
                        for (var m = 0; m < regionArr.length; m++) {
                            var lnglatArr = regionArr[m].split(" ");
                            var lnglat = new T.LngLat(lnglatArr[0], lnglatArr[1]);
                            regionLngLats.push(lnglat);
                            pointsArr.push(lnglat);
                        }
                        //创建线对象
                        var line = new T.Polyline(regionLngLats, {
                            color: "blue",
                            weight: 3,
                            opacity: 1,
                            lineStyle: "dashed"
                        });
                        //向地图上添加线
                        map.addOverLay(line);
                    }
                    //显示最佳比例尺
                    map.setViewport(pointsArr);
                }
            },

            //解析建议词信息
            suggests(obj) {
                if (obj) {
                    //建议词提示，如果搜索类型为公交规划建议词或公交站搜索时，返回结果为公交信息的建议词。
                    var suggestsHtml = "建议词提示<ul>";
                    for (var i = 0; i < obj.length; i++) {
                        suggestsHtml += "<li>" + obj[i].name + "&nbsp;&nbsp;<font style='color:#666666'>" + obj[i].address + "</font></li>";
                    }
                    suggestsHtml += "</ul>";
                    document.getElementById("suggestsDiv").style.display = "block";
                    document.getElementById("suggestsDiv").innerHTML = suggestsHtml;
                }
            },

            //解析公交信息
            lineData(obj) {
                if (obj) {
                    //公交提示
                    var lineDataHtml = "公交提示<ul>";
                    for (var i = 0; i < obj.length; i++) {
                        lineDataHtml += "<li>" + obj[i].name + "&nbsp;&nbsp;<font style='color:#666666'>共" + obj[i].stationNum + "站</font></li>";
                    }
                    lineDataHtml += "</ul>";
                    document.getElementById("lineDataDiv").style.display = "block";
                    document.getElementById("lineDataDiv").innerHTML = lineDataHtml;
                }
            },

            //清空地图及搜索列表
            clearAll() {
                map.clearOverLays();
                document.getElementById("searchDiv").innerHTML = "";
                document.getElementById("resultDiv").style.display = "none";
                document.getElementById("statisticsDiv").innerHTML = "";
                document.getElementById("statisticsDiv").style.display = "none";
                document.getElementById("promptDiv").innerHTML = "";
                document.getElementById("promptDiv").style.display = "none";
                document.getElementById("suggestsDiv").innerHTML = "";
                document.getElementById("suggestsDiv").style.display = "none";
                document.getElementById("lineDataDiv").innerHTML = "";
                document.getElementById("lineDataDiv").style.display = "none";
            },

            check() {
                this.mapTimer = setInterval(this.searchPro, 1000);
            }
        },
        mounted() {
            this.onLoad();
        },
        destroyed() {
            clearInterval(this.mapTimer);
        }
    }
</script>

<style lang="less" scoped>
    .pack {
        width: 100%;
        height: 100%;
    }

    .tree_container {
        width: 260px;
        height: 100%;
        float: left;
        border: 1px solid #d3d8e0;

    h3 {
        line-height: 40px;
        text-align: center;
        font-size: 14px;
        color: #6e6d6d;
    }

    }
    .detail_container {
    }

    h3 {
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #d3d8e0;
    }

    .treePack {
        height: 64%;
        padding: 10px;
        overflow: auto;
    }

    .phoneList li:hover {
        background: #f5f5f5;
    }

    .phoneListBg {
        background: #f5f5f5;
    }

    .hunttool {
        padding: 15px 0;

    .addbtn {
        margin-right: 6px;
        float: right;
    }

    .deltebtn {
        margin-right: 6px;
        float: right;
    }

    }
    .hunt {
        width: 14rem;
    }

    .page_container {
        height: 30px;
        margin-top: 20px;

    .page_btn {
        float: right;
    }

    .page_text {
        float: right;
        line-height: 26px;
    }

    }

    .search {
        font-size: 13px;
    }

    .ls {
        line-height: 27px;
        padding-left: 7px;
    }

    .prompt {
        display: none;
        font-size: 13px;
        border: 1px solid #999999;
    }

    .statistics {
        display: none;
        font-size: 13px;
        border: 1px solid #999999;
        overflow-y: scroll;
        height: 150px;
    }

    .suggests {
        display: none;
        font-size: 13px;
        border: 1px solid #999999;
    }

    ;
    .lineData {
        display: none;
        font-size: 13px;
        border: 1px solid #999999;
    }

    .result {
        display: none;
        font-size: 12px;
        border: 1px solid #999999;
        line-height: 27px;
        padding: 5px;
    }
</style>
